<template>
	
	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar :navTitle="navTitle" :isTitleStyle="true"></CustomNavbar>
	
	<view class="wrap container">
		<view class="top"></view>
		<uni-section class="container">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="productSpecificationsForm">
				
				<uni-forms-item label="数据ID" required name="id">
					<uni-easyinput v-model="productSpecificationsForm.id" disabled=""/>
				</uni-forms-item>
				
				<uni-forms-item label="规格名称" required name="title">
					<uni-easyinput v-model="productSpecificationsForm.title" placeholder="请输入规格名称" />
				</uni-forms-item>
				
				<uni-forms-item label="父级" name="pid">
				
					<uni-data-picker placeholder="请选择父级" popup-title="请选择父级" :localdata="productSpecificationsList"
						v-model="productSpecificationsForm.pid">
					</uni-data-picker>
				
				</uni-forms-item>
				
				<uni-forms-item label="状态" name="status">
					<uni-data-checkbox v-model="productSpecificationsForm.status" :localdata="status" />
				</uni-forms-item>
				
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" class="mt20 u-primary">提交</button>
			<button type="default" @click="handleReset('valiForm')" class="mt20">重置</button>
		</uni-section>
	</view>
	
</template>

<script>
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import { productApi } from '@/utils/api.js'
		
	export default {
		data() {
			return {
				//标题
				navTitle: '',
				//表单数据
				productSpecificationsForm: {
					id: '',
					title: '',
					status: 0,
				},
				status:[
					{
						text: '启用',
						value: 0
					},
					{
						text: '禁用',
						value: 1
					},
				],
				//校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '规格名称不能为空'
						}]
					},
				},
				//树形数据
				productSpecificationsList: [
					// {
					// 	label: '电子数码',
					// 	value: 1,
					// 	disabled: 1,
					// 	children: [
					// 		{
					// 			label: '手机',
					// 			value: 2,
					// 			disabled: 1,
					// 			children: [
					// 				{
					// 					label: '魅族',
					// 					value: 3,
					// 					disabled: 1,
					// 				}
					// 			]
					// 		},
					// 	]
					// },
					// 	text: '电子数码',
					// 	value: 1,
					// 	disabled: 1,
					// 	children: [
					// 		{
					// 			text: '手机',
					// 			value: 2,
					// 			disabled: 1,
					// 			children: [
					// 				{
					// 					text: '魅族',
					// 					value: 3,
					// 					disabled: 1,
					// 				}
					// 			]
					// 		},
					// 	]
					// },
				],
			}
		},
		components: {
			CustomNavbar
		},
		onLoad(options) {
			this.navTitle = options.navTitle
			productApi.getSpecificationsList().then(res => {
				if (res) {
					this.productSpecificationsList = res.data;
					if (options.id) {
						//赋值数据【编辑】
						this.filterTree(this.productSpecificationsList, options.id);
					} else if (options.pid) { //添加子级情况
						this.productSpecificationsForm.pid = Number(options.pid)
					}
				}
			})
			
			// this.navTitle = options.navTitle
			// if (options.id) {
				
			// 	this.isButtonDisabled = true; //禁用提交
				
			// 	uni.showToast({
			// 		title: '正在加载数据',
			// 		icon: 'none',
			// 		duration: 500
			// 	});
			
			// 	//赋值数据【编辑】
			// 	productApi.getSpecificationsList({
			// 		id: options.id
			// 	}).then(res => {
			// 		if (res) {
						
			// 			this.isButtonDisabled = false; //释放提交
						
			// 			uni.showToast({
			// 				title: '加载成功...',
			// 				icon: 'none',
			// 				duration: 500
			// 			});
						
			// 			this.dataForm = res.data[0];
			// 		}
			// 	})
			// }
		},
		onReady() {
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					productApi.updateSpecifications(this.productSpecificationsForm).then(res=>{
						if (res) {
							uni.showToast({
							    title: res.msg,
							    icon: 'success',
							    duration: 500
							});
							setTimeout(function () {
								uni.navigateTo({
									url: '/pages/product/specifications/index'
								})
							},200)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			filterTree(tree, id) {
				if (!tree.length) return []
				for (let item of tree) {
					if (item.id == id) {
						delete item.children //删除子级属性【否则后台添加报错】
						delete item.label //删除子级属性【否则后台添加报错】
						delete item.text //删除子级属性【否则后台添加报错】
						delete item.value //删除子级属性【否则后台添加报错】
						this.productSpecificationsForm = item;
						// return item; //todo 处理返回undifine问题
					}
					if (item.children && item.children.length) {
						this.filterTree(item.children, id)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}
	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}
	 .popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
	 .popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>

